<template>
	<view class="login">
		<!--end 登录图标-->
		<view class="logo">
			<image class="img" src="../../static/public/logo@3x.png"></image>
		</view>
		<view class="form_wrap">
			<view class="btn_wrap">
				<view class="header_tab" :class="[currentTab==1 ? 'on' : '']" :data-current="1" @click="swichNav">
					账号密码绑定
				</view>
				<!-- <text class="border-r"></text> -->
				<view class="header_tab" :class="[currentTab==0 ? 'on' : '']" :data-current="0" @click="swichNav">
					手机验证码绑定
				</view>
			</view>
			<!-- 手机验证登录 -->
			<view v-if="currentTab==0">
				<view class="item item-input">
					<uni-icons type="contact" size="20"></uni-icons>
					<m-input type="number" clearable v-model="codeparmas.username" placeholder="请输入手机号" :maxLength="11"></m-input>
				</view>

				<view class="item item-input">
					<uni-icons type="email" size="20"></uni-icons>
					<m-input type="number" clearable v-model="codeparmas.code" placeholder="请输入验证码" :maxLength="11"></m-input>
					<view class="sendCode">
						<button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
					</view>
				</view>
			</view>
			<!-- 账号密码登录 -->
			<view v-if="currentTab == 1">
				<view class="item item-input">
					<uni-icons type="contact" size="20"></uni-icons>
					<m-input type="number" clearable v-model="parmas.username" placeholder="请输入手机号" :maxLength="11"></m-input>
				</view>

				<view class="item item-input">
					<uni-icons type="locked" size="20" color=""></uni-icons>
					<m-input type="password" displayable v-model="parmas.password" placeholder="请输入密码" :maxLength="12"></m-input>
				</view>
			</view>

			<view class="uni-btn-v">
				<button class="loginBtn" @click="formSubmit">绑定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		components: {
			mInput,
		},
		data() {
			return {
				currentTab: "1",
				parmas: {
					username: null,
					password: null,
				},
				codeparmas: {
					username: null,
					code: null,
				},
				btnDis: false,
				submitBtnDis: false,
				btnText: "获取验证码",
			}
		},
		computed: {
			...mapState(["openId"]),
			...mapGetters(['hasLogin'])
		},
		methods: {
			//选项框点击
			swichNav: function(e) {
				this.currentTab = e.target.dataset.current;
			},
			formSubmit: function() {
				if (this.currentTab == 1) {
					this.parmas.userId = this.openId;
					this.$api.autoLign(this.parmas).then(res => {
						//用户信息
						let dataUser = res.data.data.info;
						//token
						let token = res.data.data.COOKIE_TOKEN;
						this.$store.commit("SET_USERINFO", dataUser || {});
						this.$store.commit("SET_TOKEN", token || {});
						uni.showToast({
							title: '绑定成功',
							icon: "none"
						});
						uni.switchTab({
							url: '../index/index',
						});
					}).catch(res => {
						console.log(res)
					})
				} else {
					let checkRes = graceChecker.check(this.codeparmas, formRuleConfig.loginCodeRule);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					this.codeparmas.userId = this.openId;
					this.$api.autoLignCode(this.codeparmas).then(res => {
						//用户信息
						let dataUser = res.data.data.info;
						//token
						let token = res.data.data.COOKIE_TOKEN;

						this.$store.commit("SET_USERINFO", dataUser || {});
						this.$store.commit("SET_TOKEN", token || {});
						uni.showToast({
							title: '绑定成功',
							icon: "none"
						});
						uni.switchTab({
							url: '../index/index',
						});
					}).catch(res => {
						console.log(res)
					})
				}
			},

			//发送验证码
			async sendCode() {
				let checkRes = graceChecker.check(this.codeparmas, formRuleConfig.sendCodeRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				await this.$api.getMsgCode(this.codeparmas.username);

				uni.showToast({
					title: '发送成功'
				});
				// 开启倒计时
				this.countDown();
			},

			// 验证码倒计时
			countDown() {
				let t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(t);
				this.btnText = `${timer}s`;
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.logo {
		width: 100%;
		/* height: 180rpx; */
		display: flex;
		justify-content: center;
	}

	.logo .img {
		width: 150rpx;
		height: 150rpx;
		margin: 75rpx 0 20rpx 0;
		border-radius: 7px;
	}

	.form_wrap {
		box-shadow: none;
		width: 80%;
		margin: 0 10%;
	}

	.btn_wrap {
		border-bottom: 1px solid rgba(221, 221, 221, 0.3);
		margin-bottom: 20px;
		display: flex;
		justify-content: space-around;
	}

	.header_tab {
		font-size: 14px;
		text-align: center;
		padding: 0.8rem 0.2rem;
		color: #999999;
	}

	.on {
		color: #52aaf8 !important;
		border-bottom: 2px solid #52aaf8;
	}

	.item {
		border-bottom: 1px rgba(221, 221, 221, 0.3) solid;
		display: flex;
		padding: 6px 0 5px 16px;
		align-items: center;
		font-size: 14px;
	}

	input {
		font-size: 14px;
	}

	.loginBtn {
		width: 80%;
		margin: 68rpx 10% 0 10%;
		background: #52aaf8;
		border-radius: 25px;
		color: white;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 14px;
	}
</style>
